<template>
    <div class="active">
        <ul class="header__tab">
            <li class="header__tab__item" :class="{'header__tab__item__active': search.type == 'all0'}" @click="setSearchType('all0')">全部</li>
            <li class="header__tab__item" :class="{'header__tab__item__active': search.type == 'all1'}" @click="setSearchType('all1')">未付款</li>
            <li class="header__tab__item" :class="{'header__tab__item__active': search.type == 'all2'}" @click="setSearchType('all2')">已付款</li>
            <li class="header__tab__item" :class="{'header__tab__item__active': search.type == 'all3'}" @click="setSearchType('all3')">已送达</li>
            <li class="header__tab__item" :class="{'header__tab__item__active': search.type == 'all4'}" @click="setSearchType('all4')">已发货</li>
            <li class="header__tab__item" :class="{'header__tab__item__active': search.type == 'all5'}" @click="setSearchType('all5')">退换</li>
        </ul>
        <div class="Order__search">
            <div class="Order__search__right">
            <!-- <el-button>搜索</el-button> -->
            <button class="Ecp-button-primary">搜索</button>
            </div>
            <div class="Order__search__left">
                <div class="Order__search__group">
                    <span class="Order__search__name">活动名称</span>
                    <input class="Order__search__input" placeholder="请输入活动名称"/>
                </div>
            </div>
      </div>
       <div class="active_list">
            <el-table :data="tableData" border style="width:95%">
                <el-table-column fixed  prop="date" label="状态" width="150" border="none;" align="center" >
                    <template scope="scope">
                         <span v-bind:class="{datecolor: (scope.row.date === '即将开始'||'进行中'||'待定'||'已结束')}">{{ scope.row.date }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="满赠活动" width="120"  border="none;" align="center">
                    <template scope="scope">
                         <p>{{ scope.row.name[0]}}</p>
                         <p v-bind:class="{huancolor: (scope.row.name[1] === '换购活动'),mancolor: (scope.row.name[1] === '满赠活动')}">{{ scope.row.name[1]}}</p>
                         <p>{{ scope.row.name[2]}}</p>
                    </template>
                </el-table-column>
                <el-table-column prop="province" label="开始时间" width="120"  border="none" align="center">
                    <template scope="scope">
                         <p>{{ scope.row.province[0]}}</p>
                         <p>{{ scope.row.province[1]}}</p> 
                    </template>
                </el-table-column>
                <el-table-column prop="city" label="结束时间" width="120"   border="none" align="center">
                    <template scope="scope">
                         <p>{{ scope.row.city[0]}}</p>
                         <p>{{ scope.row.city[1]}}</p> 
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="活动段数降序" width="120"  border="none" align="center">
                    <template scope="scope">
                         <p>{{ scope.row.address}}</p>
                    </template>
                </el-table-column>
                <el-table-column prop="zip" label="商品数量" width="120" b rder="none" align="center">
                    <template scope="scope">
                         <p>{{ scope.row.zip}}</p>
                    </template>
                </el-table-column>
                <el-table-column prop="zet" label="参与次数" width="120" b rder="none" align="center">
                    <template scope="scope">
                         <p>{{ scope.row.zet}}</p>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="120" border="none"  align="center">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small" border="none" align="center">开始/暂停</el-button><br/>
                    <el-button @click="handleClick(scope.row)" type="text" size="small" border="none" align="center">编辑</el-button><br/>
                    <el-button type="text" size="small" align="center">删除</el-button>
                </template>
            </el-table-column>
  </el-table>

        </div>
    </div>
</template>

<script>
export default {
    data() {
      return {
        blueClass:'blue',
         search: {
          type: 'all0'
        },
        tableData: [{
          date: '即将开始',
          name: ['山田studio','换购活动','ID:8324263532'],
          province: ['2018-05-03',  '12:00'],
          city: ['2018-05-03',  '12:00'],
          address: '4段',
          zip: '12件',
          zet:'105'
        }, {
          date: '进行中',
          name: ['山田studio','满赠活动','ID:8324263532'],
          province: ['2018-05-03',  '12:00'],
          city: ['2018-05-03',  '12:00'],
          address: '4段',
          zip:'12件',
          zet:'105'
        }, {
          date: '待定',
          name: ['山田studio','满赠活动','ID:8324263532'],
          province: ['2018-05-03',  '12:00'],
          city: ['2018-05-03',  '12:00'],
          address: '4段',
          zip: '12件',
          zet:'105'
        }, {
          date: '已结束',
          name: ['山田studio','满赠活动','ID:8324263532'],
          province: ['2018-05-03',  '12:00'],
          city: ['2018-05-03',  '12:00'],
          address:"4段",
          zip: '12件',
          zet:'105'
        }]
      }
    },
    methods: {
      setSearchType (type) {
        this.search.type = type
      },
      handleClick(row) {
        console.log(row);
      }
    }
  }
</script>

<style lang="scss" scoped>
   .datecolor{
       color:blue;
   }
   .huancolor{
     color:#90d087
   }
  .mancolor{
     color:#fcadba
   }
  .active_list{
      margin-left: 15px;
      }
 .Order__search{
      width:100%;
     .Order__search__left{
        margin-right: 108px;
        padding: 15px 0 5px 55px;
        position: relative;
        &:before {
            content: "";
            display: block;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: #333856;
            position: absolute;
            top: 28px;
            left: 19px;
        }
        .Order__search__group{
                height: 28px;
                line-height: 28px;
                display: inline-block;
                margin-bottom: 10px;
                margin-right: 28px;
         .Order__search__name{
                   vertical-align: middle;
                   margin-right: 15px;
         }
         .Order__search__input{
                  height: 25px;
                background-color: #f0f5fb;
                border-radius: 9px;
                vertical-align: middle;
                border: none;
                padding: 0 10px;
                text-align: center;
                font-size: 13px;
                &:focus {
                    outline: none;
                }
         }
        }
      }
      .Order__search__right{
      float: right;
      width: 108px;
      margin-top: 12px;
      }      
  }
</style>